<template>
  <div>
    <el-header>
      <div>
        <i class="el-icon-edit-outline" />
        修改个人信息</div>
    </el-header>
    <el-main>
      <el-row>
        <el-col :span="24">
          <el-form
            ref="dataForm"
            :rules="userrules"
            :model="usertemp"
            label-width="70px"
            style="width: 100%; "
          >
            <el-form-item
              label="姓名："
              prop="UserName"
              class="child"
            >
              <el-input v-model="usertemp.UserName" />
            </el-form-item>
            <el-form-item
              label="邮箱："
              prop="Email"
              class="child"
            >
              <el-input v-model="usertemp.Email" />
            </el-form-item>
            <el-form-item
              label="手机："
              prop="Phone"
              class="child"
            >
              <el-input v-model="usertemp.Phone" />
            </el-form-item>
            <el-form-item
              label="性别："
              prop="Gender"
              class="child"
            >
              <el-radio-group v-model="usertemp.Gender">
                <el-radio
                  :label="1"
                  checked
                >男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-row
              type="flex"
              align="middle"
              justify="space-between"
              style="width:100%;margin-bottom:30px;margin-top:50px;text-align:center;"
            >
              <el-col justify="center">
                <el-button
                  type="primary"
                  @click="updateUserData"
                >保存</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>
<script>
import { Message } from 'element-ui'
import { editUser } from '@/api/user/user'
export default {
  data() {
    return {
      data: [],
      usertemp: {
        Id: '',
        UserName: '',
        Phone: '',
        Email: '',
        Gender: 1,
        Status: 1,
        Avatar: '',
        Departmentids: [],
        DepartmentDesc: ''
      },
      userrules: {
        UserName: [
          { required: true, message: '用户姓名必填', trigger: 'blur' },
          { max: 20, message: '用户姓名不能超过20个字', trigger: 'blur' }
        ],
        Phone: [
          { required: true, message: '请填写用户手机号', trigger: 'blur' }
        ]
      }
    }
  },
  created() {

  },
  methods: {
    updateUserData() {
      var _this = this
      _this.$refs['dataForm'].validate(valid => {
        if (valid) {
          var tempData = Object.assign({}, _this.usertemp)
          editUser(tempData).then(() => {
            Message({
              message: '修改成功',
              type: 'success',
              duration: 2 * 1000
            })
            this.$router.go(-1)
          })
        }
      })
    }
  }
}
</script>
